<template>
    <div>
        <cu-navbar>
            <block slot="content">提现审核</block>
        </cu-navbar>
        <view class="page">
            <u-tabs :list="tabList"  active-color="#FF2E26" inactive-color='#888' :is-scroll="false" :current="current" @change="changeTab"></u-tabs>
        
            <!-- 待审提现 -->
            <view class="dataContent" v-if="current == 0">
                <view class="box" v-for="(item, index) in contentList" :key="index">
                    <view class="top">
                        <text>编号：{{ item.tid }}</text>
                        <text class="status" style="color: #FF6D00;" v-if="item.status == 0">待转帐</text>
                    </view>
                
                    <view class="center">
                        <view class="box_bottom">
                            <view>提现金额：<text style="color: #ff1d1d">{{item.money}}</text></view>
                            <view>提现会员 {{item.acount_name}}</view>
                            <view>收款方式 {{item.bank_name}}</view>
                            <view>提现时间 {{item.creattime}}</view>
                        </view>
                    </view>
                    <view class="last_bottom">
                        <view class="last bg btn2" @click="reject(item.tid)">拒绝</view>
                        <view class="last bg btn1" @click="toDetail(item.tid)">同意</view>
                    </view>
            
                </view>
            </view>
        
            <!-- 已审记录 -->
            <view class="dataContent" v-if="current == 1">
                <view class="box" v-for="(item, index) in contentList1" :key="index">
                    <view class="top">
                        <text>编号：{{ item.tid }}</text>
                        <text class="status" style="color: #FF6D00;">{{ item.status == 2 ? '拒绝成功' : '提现成功'}}</text>
                    </view>
                
                    <view class="center">
                        <view class="title">提现金额：{{item.money}}</view>
                        <view class="box_bottom">
                            <view>提现会员 {{item.acount_name}}</view>
                            <view>收款方式 {{item.bank_name}}</view>
                            <view>提现时间 {{item.creattime}}</view>
                            <view><text style="background-color: #FF6E03;color: #fff;margin-right: 10upx;">审核时间</text>
                                {{item.audittime}}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <footer-page
                :page="page"
                :pagesize="pagesize"
                :page-size="pageSize"
                :page-total="pageTotal"
                @pre="pagePre"
                @next="pageNext"
            ></footer-page>
        
            <cu-back-top ref="backtop" :scrollTop="scrollTop"></cu-back-top>
            <foot-bar :pageIndex="3"></foot-bar>
            <!-- <u-loadmore v-if="maxPage > 1" :status="status" /> -->
            <!-- 重新挂卖 -->
            <u-popup v-model="show" mode="center">
                <view class="box_popup box_popup1">
                    <view>提现审核</view>
                    <view>是否确认拒绝？</view>
                    <!-- <input type="text" v-model="zpNum" /> -->
                    <view class="btn">
                        <view class="cancel" @click="show = false">取消</view>
                        <view class="ok" @click="rejectConfirm">确定</view>
                    </view>
                </view>
            </u-popup>
        
        
            <u-popup v-model="show2" mode="center">
                <view class="box_popup box_popup1">
                    <view>提现审核</view>
                    <view>是否同意？</view>
                    <!-- <input type="text" v-model="zpNum" /> -->
                    <view class="btn">
                        <view class="cancel" @click="show2 = false">取消</view>
                        <view class="ok" @click="resloveConfirm">确定</view>
                    </view>
                </view>
            </u-popup>
        </view>
    </div>
</template>

<script>
import footerPage from "@/components/footer-page/index.vue";

import page from '@/mixins/page'
export default {
    components: {
        footerPage,
    },
    mixins: [page],

    data() {
        return {
            current: 0,
            tabList: [
                {
                    name: "待审提现",
                },
                {
                    name: "已审记录",
                },
            ],
            contentList: [],
            contentList1: [],
            scrollTop: 0,
            show: false,
            show2: false,
            tid: ''
        };
    },
    onShow() {

    },
    onLoad() {
        this.getList()
    },
    methods: {
        changeTab(index) {
            this.current = index;
            this.page = 1
            this.getList()
        },
        getList() {
            if (this.current == 0) {
                this.$api
                    .tixianauditlist({
                        status: 0,
                        page: this.page,
                        pagesize: this.pagesize,
                    })
                    .then((res) => {
                        // console.log(res);
                        if (!res.result.items.length) this.$common.errorToShow("暂无更多");
                        this.contentList = res.result.items;
                        this.pageTotal = res.result.pageTotal;
                        this.pageSize = res.result.pageSize;
                    });
            } else if (this.current == 1) {
                this.$api
                    .tixianauditlist({
                        status: 1,
                        page: this.page,
                        pagesize: this.pagesize,
                    })
                    .then((res) => {
                        // console.log(res);
                        if (!res.result.items.length) this.$common.errorToShow("暂无更多");
                        this.contentList1 = res.result.items;
                        this.pageTotal = res.result.pageTotal;
                        this.pageSize = res.result.pageSize;
                    });
            }
        },

        toDetail(tid) {
            this.tid = tid
            this.show2 = true
        },
        reject(tid) {
            this.show = true
            this.tid = tid
        },
        rejectConfirm() {
            this.$api.tixianject({tid: this.tid}).then(res => {
                this.$common.errorToShow(res.reason)
                if (res.code == 1) {
                    this.show = false
                    setTimeout(() => {
                        this.page = 1
                        this.getList()
                    },500)
                }
            })
        },
        resloveConfirm() {
            this.$api.tixianpass({tid: this.tid }).then(res => {
                this.$common.successToShow(res.reason)
                if (res.code == 1) {
                    this.getList()
                    this.show2 = false
                }
            })
        }
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
    },
    onReachBottom() {
        console.log("1111");
    },
};
</script>

<style lang="scss">
.page {
    background-color: #fff;
    min-height: 100vh;
    padding-bottom: 330rpx;

    .box_popup {
        width: 662upx;
        text-align: center;

        & view:nth-child(1) {
            margin-top: 32upx;
            color: #333;
            font-size: 32upx;
            font-family: PingFang SC;
            font-weight: 500;
        }

        & view:nth-child(2) {
            margin-top: 38upx;
            font-size: 28upx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #fea845;
        }

        .btn {
            display: flex;


            view {
                width: 50%;
                border-top: 2upx solid #e6e6e6;
                opacity: 1;
                text-align: center;
                line-height: 100upx;
            }

            .cancel {
                border-right: 2upx solid #e6e6e6;
                color: #999999;
                font-size: 36upx;
                font-family: PingFang SC;
                font-weight: 500;
            }

            .ok {
                color: #007aff;
                margin-top: 32upx;
                font-size: 36upx;
                font-family: PingFang SC;
                font-weight: 500;
            }
        }
    }

    .box_popup1 {
        & view:nth-child(2) {
            width: 424upx;
            font-size: 28upx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #fea845;
            margin: 38upx auto 0;
        }

        input {
            width: 424upx;
            border: 2upx solid #e6e6e6;
            margin: 0 auto;
            height: 64upx;
            margin-top: 38upx;
        }
    }
    .dataContent {
        display: flex;
        flex-direction: column;

        .box {
            display: flex;
            flex-direction: column;

            .last_bottom {
                width: 100%;
                display: flex;
                flex-direction: row-reverse;
                align-items: center;
                margin: 20upx 0;

                .last {
                    color: #ff6e03;
                    // width: 180upx;
                    padding: 0 20upx;
                    line-height: 50upx;
                    text-align: center;
                    background: #ffffff;
                    border: 2upx solid #ff6e03;
                    opacity: 1;
                    border-radius: 10upx;
                    margin-right: 30upx;
                }

                .last1 {
                    font-size: 28upx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    line-height: 40upx;
                    color: #58ccff;
                    border: none;
                }

                .last2 {
                    font-size: 28upx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    line-height: 40upx;
                    color: #333333;
                    border: none;
                }

                .bg {
                    border: 2upx solid #333;
                    color: #333;
                }
                .btn1 {
                    border-color: #1fb31d;
                    color: #007aff;
                }
                .btn2 {
                    border-color: #ff1d1d;
                    color: #ff1d1d;
                }
            }

            .top {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                padding: 18upx 30upx 24upx 20upx;
                border-top: 2upx solid #e6e6e6;

                text {
                    font-size: 28upx;
                    color: #999;
                }

                .status {
                    font-size: #ff6d00;
                }
            }

            .center {
                margin: 0 20upx;
                padding: 20upx 0;
                border-top: 1upx solid #e6e6e6;
                border-bottom: 2upx solid #e6e6e6;

                .title {
                    font-size: 30upx;
                    font-family: PingFang SC;
                    font-weight: 800;
                    line-height: 50upx;
                    color: #333333;
                }

                .box_bottom {
                    view {
                        font-size: 30upx;
                        font-family: 苹方-简;
                        font-weight: normal;
                        line-height: 50upx;
                        color: #333333;
                    }
                }
            }
        }
    }
}

.list .item {
    display: flex;
    background: #ffffff;
}

.item-image image {
    width: 200upx;
    height: 180upx;
}

.item-content {
    width: 68%;
}

.price {
    color: #e54d42;
}

.list .item-title {
    position: relative;
}

.list .item-title .tt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 80%;
}

.list .item-title .bb {
    color: #e54d42;
    position: absolute;
    top: 0;
    right: 0;
}
</style>
